import React, { useState, useEffect } from "react";
import { Table, Tag, Input, Space } from "antd";
import { AudioOutlined } from "@ant-design/icons";
import axios from "../service/index";
import "../css/user.css";

export default function Film() {
  let [list, setList] = useState([]);
  let [page, setPage] = useState(1);
  let [total, setTotal] = useState(0);
  let [str, setStr] = useState("");

  const getList = (page = 1) => {
    axios.get("/api/cinemas?page=" + page ).then((res) => {
      console.log(res);
      if (res.errNo === 0) {
        setList(res.paginate.data);
        setPage(res.paginate.current_page);
        setTotal(res.paginate.total);
      }
    });
  };
  useEffect(() => {
    getList();
  }, []);
  const { Search } = Input;

  const onSearch = (page=1) => {
    // console.log(value);
    // setStr(value)
    // getList()
    
    axios.get("/api/cinemas?page=" + page +'&keyword='+str).then((res) => {
      console.log(res);
      if (res.errNo === 0) {
        setList(res.paginate.data);
        setPage(res.paginate.current_page);
        setTotal(res.paginate.total);
      }
    });
  };
  const input = (e)=>{
    setStr(e.target.value)

  }
  const columns = [
    {
      title: "序号",
      dataIndex: "id",
    },
    {
      title: "电影院",
      dataIndex: "name",
    },

    {
      title: "所在城市",
      dataIndex: "city_name",
    },
    {
      title: "所在区",
      dataIndex: "district_name",
    },
    {
      title: "具体地址",
      dataIndex: "address",
    },
    {
      title: "状态",
      dataIndex: "status",
      render(value) {
        if (value === 1) {
          return <Tag color="red">暂停营业</Tag>;
        } else {
          return <Tag color="green">正在营业</Tag>;
        }
      },
    },
  ];
  return (
    <div>
      <div className="addTop">
        <h2>电影列表</h2>
        <Search
          className="search"
          placeholder="请输入影院名"
          onSearch={onSearch}
          enterButton
          allowClear
          style={{
            width: 304,
          }}
          onChange={input}
        />
      </div>
      <Table
        dataSource={list}
        columns={columns}
        rowKey={(item) => item.id}
        pagination={{ defaultCurrent: page, total: total, onChange: getList }}
      />
      ;
    </div>
  );
}
